/** @jsx jsx */
import { jsx } from "theme-ui"
import { AccordionNav } from "@theme-ui/sidenav"
import { Container, Flex, Link } from "@theme-ui/components"
import Sidebar from "../sidebar.mdx"
import NavLink from "../components/nav-link"
import Head from "./head"

const sidebar = {
  wrapper: AccordionNav,
  a: NavLink,
}
export default function Layout(props) {
  return (
    <Flex
      sx={{
        flexDirection: "column",
        minHeight: "100vh",
      }}>
      <Head {...props} />
      <Container as="header"
                 sx={{
                   height: 64,
                   display: "flex",
                   alignItems: "center",
                   justifyContent: "space-between",
                 }}>
        <Flex sx={{ alignItems: "center" }}>
          {/*<MenuButton
            onClick={(e) => {
               setMenuOpen(!menuOpen);
               if (!nav.current) return;
               const navLink = nav.current.querySelector("a");
               if (navLink) navLink.focus();
            }}
          />*/}
          <Link to="/" sx={{ variant: "links.nav" }}>Mallfoundry Docs</Link>
        </Flex>
      </Container>
      <Container
        sx={{
          flex: "1 1 auto",
          display: ["block", "flex"],
        }}>
        <Sidebar
          components={sidebar}
          pathname={props.location.pathname}
          sx={{
            display: null,
            width: 256,
            flex: "none",
          }}
        />
        <main
          id="content"
          sx={{
            width: "100%",
            minWidth: 0,
            maxWidth: 768,
            mx: "auto",
            lineHeight: 1.75,
            px: 3,
          }}>
          {props.children}
        </main>
      </Container>
    </Flex>
  )
}
